<template>
    <div>
        <!-- <div class="center-bottom-content center-bottom-content-card animate__animated animate__fadeInDown">
            <div class="content">
                <div class="card">
                    <img class="background" src="@/assets/three/image/operations/center-bottom-content-background.png" alt="">
                    <div class="card-header">
                        <div class="title">
                            <div class="text">核心指标</div>
                            <img src="@/assets/three/image/operations/item-header-bac.svg" alt="">
                        </div>
                    </div>
                    <div class="tabel">
                        <div class="item header">
                            <div class="date">报警时间</div>
                            <div class="category">报警类型</div>
                            <div class="grade">报警等级</div>
                            <div class="address">报警位置</div>
                            <div class="msg">报警描述</div>
                            <div class="status">处理状态</div>
                        </div>
                        <div class="item" v-for="(item, index) in alarmData" :key="index">
                            <div class="date">{{ item.time }}</div>
                            <div class="category">{{ item.type }}</div>
                            <div class="grade" :style="{color:colorLevel(item.level)}">{{ item.level }}</div>
                            <div class="address">{{ item.location }}</div>
                            <div class="msg">{{ item.detail }}</div>
                            <div class="status" :style="{color:colorStatus(item.status)}">{{ item.status }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div> -->
        <div class="plate" ref="plate">
            <ZdyHeader title="生产运营" />
            <div class="left-content animate__animated animate__fadeInLeft">
                <div class="content">
                    <div class="card left-card-1">
                        <img class="background" src="@/assets/three/image/operations/left-card-1-background.png" alt="">
                        <div class="card-header">
                            <div class="title">
                                <div class="text">生厂指标</div>
                                <img src="@/assets/three/image/index/item-header-bac.svg" alt="">
                            </div>
                        </div>
                        <div class="productionPlant">
                            <div class="group">
                                <div class="item">
                                    <Statistic :value="20.4" :valueStyle="{ color: '#37dbed', fontSize: '16px' }"
                                        suffix="m³"
                                        :suffixStyle="{ fontSize: '16px', color: '#37dbed', fontWeight: 'bold' }" />
                                    <div class="descriptionText">当日累计供水</div>
                                </div>
                                <div class="item">
                                    <Statistic :value="20.4" :valueStyle="{ color: '#37dbed', fontSize: '16px' }"
                                        suffix="m³"
                                        :suffixStyle="{ fontSize: '16px', color: '#37dbed', fontWeight: 'bold' }" />
                                    <div class="descriptionText">昨日累计供水</div>
                                </div>
                                <div class="item">
                                    <Statistic :value="20.4" :valueStyle="{ color: '#37dbed', fontSize: '16px' }"
                                        suffix="m³"
                                        :suffixStyle="{ fontSize: '16px', color: '#37dbed', fontWeight: 'bold' }" />
                                    <div class="descriptionText">当日累计取水</div>
                                </div>
                                <div class="item">
                                    <Statistic :value="20.4" :valueStyle="{ color: '#37dbed', fontSize: '16px' }"
                                        suffix="m³"
                                        :suffixStyle="{ fontSize: '16px', color: '#37dbed', fontWeight: 'bold' }" />
                                    <div class="descriptionText">昨日累计取水</div>
                                </div>
                            </div>
                        </div>
                        <div class="eCharts">
                            <ECharts :option="productionPlantOptins" />
                        </div>
                    </div>
                    <div class="card left-card-2">
                        <img class="background" src="@/assets/three/image/operations/left-card-2-background.png" alt="">
                        <div class="card-header">
                            <div class="title">
                                <div class="text">核心指标</div>
                                <img src="@/assets/three/image/index/item-header-bac.svg" alt="">
                            </div>
                        </div>
                        <div class="statistics">
                            <div class="parameter-group">
                                <div class="parameter-name">进水浊度</div>
                                <Statistic :value="20.4" :valueStyle="{ color: '#37dbed', fontSize: '16px' }"
                                    suffix="NTU"
                                    :suffixStyle="{ fontSize: '16px', color: '#37dbed', fontWeight: 'bold' }" />
                            </div>
                            <div class="parameter-group">
                                <div class="parameter-name">出水浊度</div>
                                <Statistic :value="38.59" :valueStyle="{ color: '#37dbed', fontSize: '16px' }"
                                    suffix="NTU"
                                    :suffixStyle="{ fontSize: '16px', color: '#37dbed', fontWeight: 'bold' }" />
                            </div>
                            <div class="parameter-group">
                                <div class="parameter-name">进水电导</div>
                                <Statistic :value="0.26" :valueStyle="{ color: '#37dbed', fontSize: '16px' }"
                                    suffix="NTU"
                                    :suffixStyle="{ fontSize: '16px', color: '#37dbed', fontWeight: 'bold' }" />
                            </div>
                            <div class="parameter-group">
                                <div class="parameter-name">出水电导</div>
                                <Statistic :value="0.28" :valueStyle="{ color: '#37dbed', fontSize: '16px' }"
                                    suffix="NTU"
                                    :suffixStyle="{ fontSize: '16px', color: '#37dbed', fontWeight: 'bold' }" />
                            </div>
                            <div class="parameter-group">
                                <div class="parameter-name">进水温度</div>
                                <Statistic :value="20.4" :valueStyle="{ color: '#37dbed', fontSize: '16px' }"
                                    suffix="℃"
                                    :suffixStyle="{ fontSize: '16px', color: '#37dbed', fontWeight: 'bold' }" />
                            </div>
                            <div class="parameter-group">
                                <div class="parameter-name">出水温度</div>
                                <Statistic :value="38.59" :valueStyle="{ color: '#37dbed', fontSize: '16px' }"
                                    suffix="℃"
                                    :suffixStyle="{ fontSize: '16px', color: '#37dbed', fontWeight: 'bold' }" />
                            </div>
                            <div class="parameter-group">
                                <div class="parameter-name">进水PH</div>
                                <Statistic :value="0.26" :valueStyle="{ color: '#37dbed', fontSize: '16px' }"
                                    suffix="PH"
                                    :suffixStyle="{ fontSize: '16px', color: '#37dbed', fontWeight: 'bold' }" />
                            </div>
                            <div class="parameter-group">
                                <div class="parameter-name">出水余氯</div>
                                <Statistic :value="0.28" :valueStyle="{ color: '#37dbed', fontSize: '16px' }"
                                    suffix="mg/L"
                                    :suffixStyle="{ fontSize: '16px', color: '#37dbed', fontWeight: 'bold' }" />
                            </div>
                        </div>
                        <div class="eCharts">
                            <ECharts :option="coreOption" />
                        </div>
                        <div class="card-header">
                            <div class="title">
                                <div class="text">报警统计</div>
                                <img src="@/assets/three/image/index/item-header-bac.svg" alt="">
                            </div>
                        </div>
                        <div class="orderStatistics">
                            <div class="stats-content">
                                <div class="stat-item">
                                    <Statistic :value="25" :valueStyle="{ color: '#37dbed', fontSize: '26px' }" />
                                    <div class="stat-label">总计</div>
                                </div>
                                <div class="stat-item">
                                    <Statistic :value="16" :valueStyle="{ color: '#1ed841', fontSize: '26px' }" />
                                    <div class="stat-label">今日完成</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right-content animate__animated animate__fadeInRight">
                <div class="content">
                    <div class="card right-card-1">
                        <img class="background" src="@/assets/three/image/operations/right-card-1-background.png" alt="">
                        <div class="card-header">
                            <div class="title">
                                <div class="text">工单统计</div>
                                <img src="@/assets/three/image/index/item-header-bac.svg" alt="">
                            </div>
                        </div>
                        <div class="workOrder">
                            <div class="order-item">
                                <Statistic :value="42" :valueStyle="{ color: '#37dbed', fontSize: '24px' }" />
                                <div class="order-label">今日工单总数</div>
                            </div>
                            <div class="order-item">
                                <Statistic :value="18" :valueStyle="{ color: '#f5802c', fontSize: '24px' }" />
                                <div class="order-label">待处理工单</div>
                            </div>
                            <div class="order-item">
                                <Statistic :value="22" :valueStyle="{ color: '#37dbed', fontSize: '24px' }" />
                                <div class="order-label">已完成工单</div>
                            </div>
                        </div>
                        <div class="card-header consumption">
                            <div class="title">
                                <div class="text">电耗指标</div>
                                <img src="@/assets/three/image/index/item-header-bac.svg" alt="">
                            </div>
                        </div>
                        <div class="powerConsumption">
                            <div class="electricity" @click="targetElectricityActive('left')">
                                <img class="electricity-left"
                                    :src="getImageUrl(`/src/assets/three/image/operations/${electricityActive == 'left' ? 'electricity-active.svg' : 'electricity.svg'}`)"
                                    alt="">
                                <div class="electricity-label"
                                    :class="[electricityActive == 'left' ? 'label-avtice' : '']">
                                    今日累计用电量</div>
                            </div>
                            <div class="electricity" @click="targetElectricityActive('right')">
                                <img class="electricity-right"
                                    :src="getImageUrl(`/src/assets/three/image/operations/${electricityActive == 'right' ? 'electricity-active.svg' : 'electricity.svg'}`)"
                                    alt="">
                                <div class="electricity-label"
                                    :class="[electricityActive == 'right' ? 'label-avtice' : '']">
                                    本月日均耗电量</div>
                            </div>
                        </div>
                        <div class="eCharts">
                            <ECharts :option="electricityOption" />
                        </div>
                    </div>
                    <div class="card right-card-2">
                        <img class="background" src="@/assets/three/image/operations/right-card-2-background.png" alt="">
                        <div class="card-header">
                            <div class="title">
                                <div class="text">药耗指标</div>
                                <img src="@/assets/three/image/index/item-header-bac.svg" alt="">
                            </div>
                        </div>
                        <div class="drugConsumption">
                            <div class="eCharts">
                                <ECharts :option="drugConsumptionoption" />
                                <div class="label">总药耗量（月）</div>
                            </div>
                            <div class="table">
                                <div class="item">
                                    <div class="category">类别</div>
                                    <div class="day">当日耗累积量</div>
                                    <div class="moon">当月耗累积量</div>
                                </div>
                                <div class="item">
                                    <div class="category">PAC</div>
                                    <div class="day">2吨</div>
                                    <div class="moon">2吨</div>
                                </div>
                                <div class="item">
                                    <div class="category">PAM</div>
                                    <div class="day">1吨</div>
                                    <div class="moon">4吨</div>
                                </div>
                                <div class="item">
                                    <div class="category">KMNO</div>
                                    <div class="day">8吨</div>
                                    <div class="moon">8吨</div>
                                </div>
                                <div class="item">
                                    <div class="category">NACL</div>
                                    <div class="day">8吨</div>
                                    <div class="moon">8吨</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import ECharts from '@/components/ECharts';
import Statistic from '@/components/Statistic';
import * as echarts from 'echarts';
import ZdyHeader from '@/components/ZdyHeader';
import 'animate.css/animate.min.css';
import { onMounted } from 'vue';
import { ref } from 'vue';

const plate = ref(null);
const electricityActive = ref('right');

const targetElectricityActive = (value) => {
    electricityActive.value = value;
}

const alarmData = [
    {
        time: "2025-04-24 14:20:00",
        type: "设备报警",
        level: "危急",
        location: "1号水泵房",
        detail: "1号水泵房电机温度异常",
        status: "未处理"
    },
    {
        time: "2025-04-24 14:20:00",
        type: "水质报警",
        level: "重要",
        location: "2号沉淀池",
        detail: "水质浊度异常升高",
        status: "处理中"
    },
    {
        time: "2025-04-24 14:20:00",
        type: "系统报警",
        level: "普通",
        location: "2号沉淀池",
        detail: "水质浊度异常升高",
        status: "已解决"
    }
];

const colorLevel = (value) => {
    return {
        '危急':'#D43030',
        '重要':'#FF8D1A',
        '普通':'#54AFFF',
    }[value]
}

const colorStatus = (value) => {
    return {
        '未处理':'#D43030',
        '处理中':'#FF8D1A',
        '已解决':'#0FBB98',
    }[value]
}

const productionPlantOptins = {
    title: { left: 'center' },
    tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
    xAxis: {
        type: 'category',
        data: ['03-10', '03-11', '03-12', '03-13', '03-14', '03-15', '03-16'],
        axisLabel: { color: '#fff' },
        axisLine: { lineStyle: { color: '#fff' } }
    },
    yAxis: {
        type: 'value',
        axisLabel: { color: '#fff' },
        axisLine: { lineStyle: { color: '#fff' } },
        splitLine: { lineStyle: { color: ['#333'] } }
    },
    series: [{
        name: '数值',
        type: 'bar',
        barWidth: '35%',
        itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#23bcfb' },
                { offset: 1, color: 'rgba(0, 191, 165, 0)' }
            ]),
            barBorderRadius: [10, 10, 0, 0]
        },
        data: [0.7, 0.5, 0.7, 0.7, 0.6, 0.3, 0.4]
    }],
    grid: {
        top: '10%',
        left: '3%',
        right: '4%',
        bottom: '0%',
        containLabel: true
    }
}

const coreOption = {
    title: { left: 'center' },
    tooltip: { trigger: 'axis' },
    legend: {
        data: ['出水', '进水'],
        top: 0,
        left: 'center',
        padding: [10, 10],
        textStyle: { color: '#fff' }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:06', '18:00'],
        axisLabel: { color: '#fff' },
        axisLine: { lineStyle: { color: '#fff' } }
    },
    yAxis: {
        type: 'value',
        axisLabel: { color: '#fff' },
        axisLine: { lineStyle: { color: '#fff' } },
        splitLine: { lineStyle: { color: ['#333'] } }
    },
    series: [
        {
            name: '出水',
            type: 'line',
            itemStyle: { color: '#007bff' },
            data: [60000, 120000, 130000, 120000, 60000, 110000, 10000]
        },
        {
            name: '进水',
            type: 'line',
            itemStyle: { color: '#ff7f0e' },
            data: [40000, 20000, 50000, 10000, 30000, 40000, 50000]
        }
    ],
    grid: {
        left: '3%',
        right: '4%',
        bottom: '2%',
        containLabel: true
    }
};

const electricityOption = {
    tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
    legend: {
        data: ['今日耗电量'],
        top: 30,
        textStyle: { color: '#fff' },
        itemWidth: 16,
        itemHeight: 10,
        itemGap: 10
    },
    xAxis: {
        type: 'category',
        data: ['03-10', '03-11', '03-12', '03-13', '03-14', '03-15', '03-16'],
        axisLabel: { color: '#fff' },
        axisLine: { lineStyle: { color: '#fff' } }
    },
    yAxis: {
        type: 'value',
        axisLabel: { color: '#fff' },
        axisLine: { lineStyle: { color: '#fff' } },
        splitLine: { lineStyle: { color: ['#333'] } }
    },
    series: [{
        name: '今日耗电量',
        type: 'bar',
        barWidth: '35%',
        itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#00bfa5' },
                { offset: 1, color: 'rgba(0, 191, 165, 0)' }
            ]),
            barBorderRadius: [10, 10, 0, 0]
        },
        data: [2000, 2800, 3500, 2700, 2000, 1600, 2000]
    }],
    grid: {
        left: '3%',
        right: '4%',
        bottom: '5%',
        containLabel: true
    }
};

const drugConsumptionoption = {
    tooltip: { trigger: 'item' },
    series: [{
        name: '耗电量',
        type: 'pie',
        radius: ['50%', '80%'],
        avoidLabelOverlap: false,
        label: { show: false, position: 'center' },
        emphasis: { label: { show: true, fontSize: '16', fontWeight: 'bold' } },
        labelLine: { show: false },
        data: [
            { value: 335, name: '类别A' },
            { value: 310, name: '类别B' },
            { value: 234, name: '类别C' },
            { value: 135, name: '类别D' }
        ]
    }]
};

const eChartsOptins = {
    title: {},
    tooltip: { trigger: 'item' },
    legend: {
        left: 'center',
        textStyle: { color: '#fff', fontSize: 14 },
        data: ['故障', '正常', '维修']
    },
    series: [
        {
            name: '设备状态',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: { show: false, position: 'center' },
            emphasis: { label: { show: true, fontSize: '40', fontWeight: 'bold' } },
            labelLine: { show: false },
            data: [
                { value: 6, name: '故障' },
                { value: 32, name: '正常' },
                { value: 4, name: '维修' }
            ],
            itemStyle: {
                normal: {
                    color: function (params) {
                        var colorList = ['#FFA022', '#00B050', '#FF0000'];
                        return colorList[params.dataIndex];
                    }
                }
            }
        }
    ]
};

function getImageUrl(url) {
    return new URL(url, import.meta.url).href;
}

onMounted(() => {})
</script>

<style lang="scss" scoped>
.left-card-1 {
    height: 300px !important;

    .group {
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 0 20px;

        .item {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            padding: 5px 0;
        }
    }

    .descriptionText {
        font-size: 12px;
        margin-top: 5px;
        color: #fff;
    }

    .eCharts {
        height: 150px !important;
    }

    :deep(.chart-container) {
        height: 160px !important;
    }
}

.left-card-2 {
    height: 560px !important;

    .statistics {
        height: 140px !important;
    }

    :deep(.chart-container) {
        height: 190px !important;
    }

    .statistics {
        display: flex;
        flex-wrap: wrap;
        height: calc(100% - 60px);
        width: 100%;

        .parameter-group {
            width: 25%;
            height: 50%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .parameter-name {
                font-size: 14px;
                color: #fff;
                margin-bottom: 6px;
            }

            .parameter-value {
                color: #37dbed;
                font-size: 18px;
                font-weight: bold;
            }
        }
    }

    .orderStatistics {
        width: 100%;

        .stats-content {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
        }

        .stat-item {
            width: 50%;
            height: 50%;
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;
            margin: 10px 0;
        }

        .stat-value {
            font-size: 26px;
            font-weight: bold;
        }

        .stat-label {
            font-size: 14px;
            margin-top: 10px;
            color: #fff;
        }
    }
}

.right-card-1 {
    height: 580px !important;

    .workOrder {
        display: flex;
    }

    .order-item {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        margin: 24px 0;

        .order-label {
            font-size: 14px;
            color: #fff;
            margin-top: 10px;
        }
    }

    .consumption {
        margin-top: 0 !important;
    }

    .powerConsumption {
        display: flex;

        .electricity {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .electricity-left,
            .electricity-right {
                width: 88px;
                height: 88px;
                cursor: pointer;
            }

            .electricity-label {
                font-size: 14px;
                margin-top: 6px;
                color: #1076d5;
            }

            .label-avtice {
                color: #11d0a4;
            }
        }
    }

    :deep(.chart-container) {
        height: 220px !important;
    }
}

.right-card-2 {
    height: 277px !important;

    :deep(.chart-container) {
        height: 160px !important;
    }

    .drugConsumption {
        display: flex;

        .eCharts {
            flex: 1;
            text-align: center;

            .label {
                font-size: 14px;
                padding-left: 10px;
                color: #fff;
            }
        }

        .table {
            flex: 2;
            display: flex;
            flex-direction: column;

            .item {
                display: flex;
                justify-content: space-around;
                align-items: center;
                margin: 10px 0;
                color: #fff;
                text-align: center;

                .category,
                .day,
                .moon {
                    flex: 1;
                    text-align: center;
                    font-size: 14px;
                }
            }

            .item:nth-child(1) {
                color: #37DBED;
            }
        }
    }
}

.center-bottom-content {
    width: 800px !important;
    height: 230px !important;
    bottom: 130px;
    .content {
        display: flex;
        flex-direction: column;
        width: 100%;
        position: relative;
        height: 230px !important;

        .card {
            width: 100%;
            height: 100%;
            position: relative;
        }

        .background {
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: -1;
        }

        .card-header {
            height: 60px;
            position: relative;

            .title {
                padding-top: 16px;
                padding-left: 20px;
                font-size: 16px;
                font-weight: bold;
                color: #fff;

                .text {
                    margin-bottom: -8px;
                    padding-left: 10px;
                }

                img {
                    position: absolute;
                    z-index: -1;
                }
            }
        }

        .tabel {
            padding: 0 20px;

            .item {
                display: flex;
                justify-content: space-between;
                align-items: center;

                >div {
                    flex: 1;
                    margin: 10px 0;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #fff;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    font-size: 14px;
                }
            }

            .header>div {
                color: #37DBED !important;
            }
        }
    }
}
</style>